<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-23 15:02:32
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiForm\uiForm.vue
 * CIMC-V2
-->
<template>
  <div
    :id="hasPreview ? info._id : `diy_${info._id}`"
    class="ui-line-chart h-full"
    :style="{
      width: '100%',
    }"
  >
    <canvas id="canvas" ref="canvas" style="background: rgba(0, 0, 0, 0)"></canvas>
    <Widget
      class="flex"
      :class="['justify-' + info.extension.justifyAlign.value, 'flex-' + info.extension.flexDer.value]"
      :list="info.list"
      :style="{
        alignItems: info.extension.itemsAlign.value,
      }"
    />
  </div>
</template>
<script>
  import { defineComponent, defineAsyncComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiFireworks',
    components: {
      // 使用异步组件
      Widget: defineAsyncComponent(() => import('@ve/components/widget.vue')),
    },
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        timer: null,
      }
    },
    watch: {
      info: {
        handler() {
          this.init()
        },
        deep: true,
      },
    },
    created() {},
    mounted() {
      this.init()
    },
    beforeUnmount() {
      this.timer && clearInterval(this.timer)
    },
    methods: {
      init() {
        let _this = this
        this.$nextTick(() => {
          //获取画布对象
          var canvas = this.$refs.canvas
          //获取画布的上下文
          var context = canvas.getContext('2d')
          //获取浏览器屏幕的宽度和高度
          var W = window.innerWidth
          var H = window.innerHeight
          //设置canvas的宽度和高度
          canvas.width = W
          canvas.height = H
          //每个文字的字体大小
          var fontSize = this.info.extension.fontSize.value
          //计算列
          var colunms = Math.floor(W / fontSize)
          //记录每列文字的y轴坐标
          var drops = []
          //给每一个文字初始化一个起始点的位置
          for (var i = 0; i < colunms; i++) {
            drops.push(0)
          }

          //运动的文字
          var str = this.info.extension.content.value
          //4:fillText(str,x,y);原理就是去更改y的坐标位置
          //绘画的函数
          function draw() {
            context.fillStyle = _this.info.extension.bgColor?.value ? _this.info.extension.bgColor?.value : '#00325D'
            context.fillRect(0, 0, W, H)
            //给字体设置样式
            context.font = '700 ' + fontSize + 'px  微软雅黑'
            //给字体添加颜色
            context.fillStyle = _this.info.extension.isRander.value ? randColor() : _this.info.extension.fontColor.value //可以rgb,hsl, 标准色，十六进制颜色
            //写入画布中
            for (var i = 0; i < colunms; i++) {
              var index = Math.floor(Math.random() * str.length)
              var x = i * fontSize
              var y = drops[i] * fontSize
              context.fillText(str[index], x, y)
              //如果要改变时间，肯定就是改变每次他的起点
              if (y >= canvas.height && Math.random() > 0.99) {
                drops[i] = 0
              }
              drops[i]++
            }
          }

          function randColor() {
            var r = Math.floor(Math.random() * 256)
            var g = Math.floor(Math.random() * 256)
            var b = Math.floor(Math.random() * 256)
            return 'rgb(' + r + ',' + g + ',' + b + ')'
          }

          draw()
          this.timer && clearInterval(this.timer)
          this.timer = setInterval(draw, 30)
        })
      },
    },
  })
</script>
<style lang="scss">
  .uiFireworks {
    width: 100%;
    height: 100%;
    position: relative;
  }
  #canvas {
    width: 100%;
    height: 100%;
    position: absolute;
  }
</style>
